<template>
  <view
    class="uni-drawer"
    :catchtouchmove="catchtouchmove"
    :class="{ 'uni-drawer-visible': visible, 'uni-drawer-right': rightMode }"
    @touchmove.stop.prevent
  >
    <view v-if="showMask" class="uni-drawer-mask" @tap="close"></view>
    <view class="uni-drawer-content" :style="{ width: contentWidth }">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    /**
     * 显示状态
     */
    visible: {
      type: Boolean,
      default: false,
    },
    /**
     * 显示模式（左、右），只在初始化生效
     */
    mode: String,
    /**
     * 蒙层显示状态
     */
    mask: {
      type: [Boolean, String],
      default: true,
    },
    contentWidth: {
      type: String,
      default: '80%',
    },
  },
  data() {
    return {
      rightMode: false,
      catchtouchmove: false,
    };
  },
  computed: {
    showMask() {
      return String(this.mask) === 'true';
    },
  },
  created() {
    this.rightMode = this.mode === 'right';
    //#ifdef MP-WEIXIN
    this.catchtouchmove = true;
    //#endif
  },
  methods: {
    close() {
      this.$emit('close');
    },
  },
};
</script>

<style>
.uni-drawer {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  visibility: hidden;
  z-index: 998;
  height: 100%;
}

.uni-drawer > .uni-drawer-mask {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.uni-drawer > .uni-drawer-content {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  background: #ffffff;
  transition: all 0.3s ease-out;
  transform: translatex(-100%);
}

.uni-drawer.uni-drawer-right > .uni-drawer-content {
  left: auto;
  right: 0;
  transform: translatex(100%);
}

.uni-drawer.uni-drawer-visible {
  visibility: visible;
}

.uni-drawer.uni-drawer-visible > .uni-drawer-mask {
  display: block;
}

.uni-drawer.uni-drawer-visible > .uni-drawer-content {
  transform: translatex(0);
}
</style>
